<template>
  <div class="login-container">
    <div class="left-box">
      <img class="bg-logo" src="../../assets/bg.png">
    </div>

    <el-form
      ref="loginForm"
      auto-complete="on"
      :model="loginForm"
      :rules="loginRules"
      label-position="top"
      label-width="100px"
      class="card-box login-form"
    >
      <h2 class="title">hello！</h2>
      <p class="sub-title">欢迎您 <span class="blue-font">登录</span> 智能疫管手环管理后台</p>
      <el-form-item prop="username" label="账号">
        <el-input id="username" v-model="loginForm.username" auto-complete="on" name="username" type="text" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="滑动验证">
        <div id="nc-container" />
      </el-form-item>
      <el-form-item prop="smsCode" label="验证码">
        <div class="verify-code-input-box">
          <el-input v-model="loginForm.smsCode" name="smsCode" type="text" maxlength="6" placeholder="请输入验证码" />
          <el-button class="sms-btn" :disabled="!verifyCode.enable" :type="verifyCode.enable ? 'primary' : 'info'" @click="sendVerifyCode">{{ verifyCode.msg }}</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { isValidPhone, isValidSmsCode } from '@/utils/validate'
import initNCValidator from '@/utils/NCValidator'

export default {
  name: '',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isValidPhone(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的手机号'))
      }
    }
    const validateSmsCode = (rule, value, callback) => {
      if (isValidSmsCode(value)) {
        callback()
      } else {
        callback(new Error('验证码不正确'))
      }
    }
    return {
      loginForm: {
        username: '',
        smsCode: '',
        NCInfo: null
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validatePhone }],
        smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }]
      },
      loading: false,
      verifyCode: {
        enable: false,
        msg: '发送验证码'
      },
      nc: null
    }
  },
  computed: {
    isPhoneValid() {
      return isValidPhone(this.loginForm.username)
    }
  },
  mounted() {
    // 加载阿里云滑动安全控件
    this.nc = initNCValidator((NCResponse) => {
      this.loginForm.NCInfo = NCResponse
      this.verifyCode.enable = true
    })
  },
  methods: {
    sendVerifyCode() {
      const phone = this.loginForm.username
      if (!phone) {
        Message({
          message: '请输入正确的手机号',
          type: 'error',
          duration: 3 * 1000
        })
        return
      }
      if (isValidPhone(phone)) {
        const setVerifyCode = (enable, msg) => {
          this.verifyCode = { enable, msg }
        }
        this.verifyCode.enable = false
        const data = {
          phone,
          requestRemoteAddr: '',
          sessionId: this.loginForm.NCInfo.sessionId,
          sig: this.loginForm.NCInfo.sig,
          token: this.loginForm.NCInfo.token
        }
        this.$store.dispatch('user/SendVerifyCode', data).then(() => {
          setVerifyCode(false, '重新发送（60s）')
          let minutes = 60
          const counter = setInterval(() => {
            --minutes
            this.verifyCode.msg = `重新发送（${minutes}s）`
            if (minutes === -1) {
              setVerifyCode(true, '发送验证码')
              clearInterval(counter)
            }
          }, 1000)
        })
          .catch(() => {
            setVerifyCode(true, '发送验证码')
          })
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (!this.loginForm.NCInfo) {
            Message({
              message: '请拖动滑块，进行验证',
              type: 'error',
              duration: 3 * 1000
            })
            return
          }
          this.loading = true
          const data = {
            phone: this.loginForm.username,
            vcode: this.loginForm.smsCode
          }
          this.$store.dispatch('user/login', data).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
            this.nc.reset()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#2d3a4b;
  $dark_gray:#889aa4;
  $light_gray:#eee;

  .login-container {
    display: flex;
    position: fixed;
    height: 100%;
    width:100%;
    .el-form--label-top .el-form-item__label {
      font-size:14px;
      font-weight:400;
      color:rgba(16,30,61,.29);
      line-height:14px;
    }
    .left-box {
      width: 60%;
      min-height: 100%;
      .bg-logo {
        width: 100%;
        height: 100%;
      }
    }
    .nc-container .nc_scale{
      height: 44px;
      background: #F7F9FC;
      span {
        height: 100%;
        line-height: 44px;
      }
    }
    // 自动填充样式
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #F7F9FC inset !important;
      -webkit-text-fill-color: #101E3D !important;
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #101E3D;
      height: 47px;
    }
    .title {
      font-size:30px;
      font-weight:600;
      color:rgba(16,30,61,1);
      line-height:42px;
    }
    .sub-title {
      font-size:16px;
      font-weight:400;
      color:rgba(16,30,61,.45);
      line-height:14px;
      margin-bottom: 76px;
    }
    .blue-font {
      font-size:16px;
      font-weight:400;
      color:rgba(14,71,186,1);
      line-height:14px;
    }
    .login-form {
      min-width: 40%;
      padding: 70px 118px;
    }
    .el-form-item {
      input {
        // width:324px;
        height:44px;
        background:rgba(247,249,252,1);
        border-radius:2px;
        position: relative;
      }
    }
    .verify-code-input-box {
      display: flex;
    }
    .sms-btn {
      position:absolute;
      right: 0;
      height: 44px;
      border: 10px;
    }
    .nc-container .nc_scale span {
      height: 100%;
    }
    .nc-container .errloading {
      width: auto;
      background-color: #f7f9fc;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .login-btn {
      width:162px;
      height:44px;
      background:linear-gradient(270deg,rgba(47,110,248,1) 0%,rgba(63,135,255,1) 100%);
      box-shadow:0px 10px 30px 0px rgba(47,110,248,0.4);
      border-radius:4px;
    }
  }
</style>
